<template>
  <div
    id="outsideAsthmaAndAllergicForm"
    class="outsideAsthmaAndAllergicForm-container"
  >
    <el-alert
      v-if="d.title"
      :title="d.title"
      type="warning"
      center
      show-icon
    ></el-alert>
    <el-form ref="formRef" :rules="rules" :model="d.form" label-position="top">
      <checkbox-form
        v-model="d.form.attr1s"
        prop="attr1s"
        title="1. 患儿有咳嗽吗？有喘息吗？有医生曾说过患儿有喘息吗 ？"
        @checkboxFormChange="attr1ChangeValue"
        :disabled="d.disabled"
        :items="[
          { label: '咳嗽', value: '咳嗽' },
          { label: '喘息', value: '喘息' },
          { label: '均无', value: '均无' },
        ]"
      ></checkbox-form>

      <template v-if="d.form.attr1s && d.form.attr1s.includes('喘息')">
        <radio-form
          v-model="d.form.attr3s"
          :disabled="d.disabled"
          prop="attr3s"
          title="2. 患儿有喘息的话，是具有反复性的喘息吗？"
          :items="[
            { label: '是', value: '是' },
            { label: '否', value: '否' },
          ]"
        ></radio-form>

        <el-form-item
          prop="attr4s"
          label="3. 患儿年龄多大时，开始出现喘息的症状？"
        >
          <el-input
            v-number:1
            v-model="d.form.attr4s"
            class="input"
            :disabled="d.disabled"
            placeholder="请输入岁数（仅支持数字和两位小数）"
          ></el-input>
        </el-form-item>

        <checkbox-form
          v-model="d.form.attr5s"
          :disabled="d.disabled"
          prop="attr5s"
          title="4. 什么情况下会出现喘息？如感冒、运动、大哭大笑等？"
          :items="[
            { label: '感冒', value: '感冒' },
            { label: '剧烈运动', value: '剧烈运动' },
            { label: '大叫，大笑', value: '大叫，大笑' },
            { label: '哭闹', value: '哭闹' },
            {
              label: '进食甜食或冷冻食品饮料',
              value: '进食甜食或冷冻食品饮料',
            },
            { label: '气候变化', value: '气候变化' },
            { label: '接触动物', value: '接触动物' },
            { label: '闻到浓烈的气味', value: '闻到浓烈的气味' },
          ]"
        ></checkbox-form>

        <checkbox-form
          v-model="d.form.attr6s"
          :disabled="d.disabled"
          prop="attr6s"
          title="5. 喘息通常是在什么时间发生呢？四季中的哪个季节？一天中的哪个时段？"
          :items="[
            { label: '春季', value: '春季' },
            { label: '夏季', value: '夏季' },
            { label: '秋季', value: '秋季' },
            { label: '冬季', value: '冬季' },
            { label: '症状晨起好发或加重', value: '症状晨起好发或加重' },
            {
              label: '症状晚上尤其是入睡后好发或加重',
              value: '症状晚上尤其是入睡后好发或加重',
            },
          ]"
        ></checkbox-form>

        <radio-form
          v-model="d.form.attr7s"
          :disabled="d.disabled"
          prop="attr7s"
          title="6. 患儿喘息时有用过雾化吗？用药是否有效？"
          :items="[
            { label: '雾化用药有效', value: '雾化用药有效' },
            { label: '雾化用药无效', value: '雾化用药无效' },
          ]"
        ></radio-form>
        <checkbox-form
          v-model="d.form.attr8s"
          :disabled="d.disabled"
          prop="attr8s"
          title="7. 患儿出生时曾患过湿疹吗？有对什么过敏吗？期间有喘息过吗？"
          :items="[
            { label: '湿疹', value: '湿疹' },
            { label: '过敏', value: '过敏' },
            { label: '期间有喘息', value: '期间有喘息' },
          ]"
        ></checkbox-form>

        <radio-form
          v-model="d.form.attr9s"
          :disabled="d.disabled"
          prop="attr9s"
          title="8. 家族有过敏史吗？"
          :items="[
            { label: '有', value: '有' },
            { label: '无', value: '无' },
          ]"
        ></radio-form>
      </template>
      <template
        v-if="
          d.form.attr1s &&
          d.form.attr1s.includes('咳嗽') &&
          !d.form.attr1s.includes('喘息')
        "
      >
        <radio-form
          v-model="d.form.attr2s"
          :disabled="d.disabled"
          prop="attr2s"
          title="2. 若无喘息患儿咳嗽是否超过1个月?"
          :items="[
            { label: '是', value: '是' },
            { label: '否', value: '否' },
          ]"
        ></radio-form>

        <checkbox-form
          v-model="d.form.attr8s"
          :disabled="d.disabled"
          prop="attr8s"
          title="3. 患儿出生时曾患过湿疹吗？有对什么过敏吗？期间有喘息过吗？"
          :items="[
            { label: '湿疹', value: '湿疹' },
            { label: '过敏', value: '过敏' },
            { label: '期间有喘息', value: '期间有喘息' },
          ]"
        ></checkbox-form>

        <radio-form
          v-model="d.form.attr9s"
          :disabled="d.disabled"
          prop="attr9s"
          title="4. 家族有过敏史吗？"
          :items="[
            { label: '有', value: '有' },
            { label: '无', value: '无' },
          ]"
        ></radio-form>
        <radio-form
          v-model="d.form.attr10s"
          :disabled="d.disabled"
          prop="attr10s"
          title="5. 患儿咳嗽时有用过雾化吗？用药是否有效？"
          :items="[
            { label: '雾化用药有效', value: '雾化用药有效' },
            { label: '雾化用药无效', value: '雾化用药无效' },
          ]"
        ></radio-form>
      </template>
      <div class="footer" v-if="!d.disabled">
        <debouncebtn
          class="footer-button"
          type="primary"
          @debounce="onSubmit(d.form)"
        >
          保存
        </debouncebtn>
      </div>
    </el-form>
  </div>
</template>
<script>
  import radioForm from '@/components/RadioForm'
  import checkboxForm from '@/components/CheckboxForm'
  import template from '@/hooks/screeningForm'
  import { ref, onBeforeMount } from 'vue'
  import { queryInfo } from '@/api/modules/reception.js'
  import debouncebtn from '@/components/DebounceBtn'
  export default {
    name: 'asthmaAndAllergicForm',
    props: { id: Number, pid: Number },
    emits: ['success'],
    components: { radioForm, checkboxForm, debouncebtn },
    data() {
      return {
        isShow: true,
        printObj: {
          id: 'asthmaAndAllergicForm',
          preview: false,
          previewTitle: '点击下方按钮进行打印',
          popTitle: '儿童哮喘与过敏性疾病筛查表',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        },
      }
    },
    setup(props, context) {
      let day = ref(null)
      let label = ref(label)
      let checkLable = ref([])
      const print = function () {
        // let bdhtml = window.document.body.innerHTML
        // var jubuData
        // = document.getElementById('asthmaAndAllergicForm').innerHTML
        // window.document.body.innerHTML = jubuData
        // //调用打印功能
        // window.print()
        // window.document.body.innerHTML = bdhtml //重新给页面内容赋值；
      }
      // 初始化
      onBeforeMount(async () => {
        if (props.id) {
          d.disabled = true
          let res = await queryInfo({ id: props.id, patientId: props.pid })
          if (res.data) {
            d.form = res.data
            d.title = res.message
          }
        }
      })
      const { pageDataToOther, rulesTemplateToOther, toSave } = template()
      // 表单相关
      const d = pageDataToOther()
      const rules = rulesTemplateToOther()
      const formRef = ref(null)
      const onSubmit = async function (form) {
        console.log('form =' + JSON.stringify(form))
        const save = toSave(4)
        const res = await save(formRef, form, {
          id: props.id,
          patientId: props.pid,
          screeningType: 4,
        })
        d.title = res.data.message
        context.emit('success')
      }

      function attr1ChangeValue(data) {
        // console.log('attr1ChangeValue=' + JSON.stringify(d.form.attr1s))
        const { val, preVal } = data
        if (props.id && !preVal) return

        if (val && val.includes('均无') && !preVal.includes('均无')) {
          d.form = { attr1s: '均无' }
        } else if (preVal && preVal.includes('均无')) {
          const b1 = val.includes('喘息')
          const b2 = val.includes('咳嗽')
          if (b1 && !b2) {
            d.form = { attr1s: '喘息' }
          } else if (!b1 && b2) {
            d.form = { attr1s: '咳嗽' }
          } else if (b1 && b2) {
            d.form = { attr1s: '喘息,咳嗽' }
          }
        } else if (
          val &&
          preVal &&
          val.includes('喘息') &&
          preVal.includes('喘息') &&
          !val.includes('均无')
        ) {
          console.log('喘息改喘息不用修改')
        } else {
          d.form = { attr1s: d.form.attr1s }
        }
      }
      return {
        day,
        label,
        checkLable,
        print,
        d,
        onSubmit,
        rules,
        formRef,
        attr1ChangeValue,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .outsideAsthmaAndAllergicForm-container {
    padding: 22px;
    :deep(.el-form-item__label) {
      color: #303133;
      padding: 0px auto;
      font-size: 17px;
    }
    .input {
      display: inline-block;
      width: 300px;
      margin-left: 20px;
      :deep(.el-input__inner) {
        border-radius: 0;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d9d9d9;
        vertical-align: middle;
        height: 30px;
        font-size: 17px;
        text-align: center;
      }
    }
    .footer {
      display: flex;
      justify-content: flex-end;
    }
  }
  //一定全局定义样式
  @media print {
    //打印的样式
    #frames {
      // width: 100%;
      // height: calc(100vh - 220px);
    }
  }
</style>
